<template>
	<view class="content">
		<view class="partner_box1" v-if="type">
			<view class="box1_box1" @click="type=1">佣金记录</view>
			<view class="box1_box1" @click="type=2">提现记录</view>
			<view class="box1_box2 goldBg" :style="type==1?'left:0;':'left:325upx;'"></view>
		</view>
		<view class="main">
			<view class="orderList">
				<view class="orderItem" v-for="(item,index) in dataList" :key="index" v-if="type==1">
					<view class="header">
						<view class="title">
							佣金
						</view>
						<view class="number">
							+￥{{item.amount}}
						</view>
					</view>
					<view class="contentItem">
						<view class="lable">
							添加时间
						</view>
						<view class="value">
							{{item.addTime}}
						</view>
					</view>
					<!-- <view class="contentItem">
						<view class="lable">
							佣金状态 
						</view>
						<view class="value">
							<text class="ing" v-if="item.status==0">待审核</text>
							<text class="ok" v-if="item.status==1">已审核</text>
							<text class="no" v-if="item.status==2">已驳回</text>
						</view>
					</view> -->
					<!-- <view class="contentItem">
						<view class="lable">
							申请状态
						</view>
						<view class="value">
							<text class="ok" v-if="item.dkType==1">线上转账</text>
							<text class="no" v-if="item.dkType==2">线下转账</text>
						</view>
					</view> -->
				</view>
			
				<view class="orderItem" v-for="(item,index) in dataList2" :key="index" v-if="type==2">
					<view class="header">
						<view class="title">
							提现
						</view>
						<view class="number">
							-￥{{item.actualAmount}}
						</view>
					</view>
					<view class="contentItem">
						<view class="lable">
							申请时间
						</view>
						<view class="value">
							{{item.addTime}}
						</view>
					</view>
					<view class="contentItem">
						<view class="lable">
							申请状态
						</view>
						<view class="value">
							<text class="ing" v-if="item.status==0">待审核 </text>
							<text class="ok" v-if="item.status==1">已打款</text>
							<text class="no" v-if="item.status==2">已驳回</text>
						</view>
					</view>
					<view class="contentItem" v-if="item.status==2">
						<view class="lable">
							驳回理由
						</view>
						<view class="value">
							<text class="no">{{item.refusal}}</text>
						</view>
					</view>
					<view class="contentItem">
						<view class="lable">
							开户名
						</view>
						<view class="value">
							{{item.openAccountName}}
						</view>
					</view>
					<view class="contentItem">
						<view class="lable">
							开户行
						</view>
						<view class="value">
							{{item.openBankName}}
						</view>
					</view>
					<view class="contentItem">
						<view class="lable">
							卡号
						</view>
						<view class="value">
							{{item.bankNumber}}
						</view>
					</view>
					
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				dataList: [],
				dataList2:[]
			};
		},
		onLoad() {
			this.getUserCommissionList()
			this.getWithdrawalPage()
		},
		methods: {
			// 获取我的佣金记录
			getUserCommissionList() {
				this.$http('/api/commission/getUserCommissionList', {
					pageNo: 1,
					pageSize: 999
				}).then(res => {
					this.dataList = res.result.records
				})
			},
			// 获取我的提现记录
			getWithdrawalPage() {
				this.$http('/api/commission/getWithdrawalPage', {
					pageNo: 1,
					pageSize: 999
				}).then(res => {
					this.dataList2 = res.result.records
				})
			}

		}
	}
</script>
<style>
	page {
		/* background-color: #f9fbff; */
		/* background: linear-gradient(225deg, #e4cdff 0%, #fff 100%); */
	}
</style>
<style lang="scss" scoped>
	.content {
		margin-top: 20upx;
		padding-bottom: 200upx;

		.partner_box1 {
			width: 650rpx;
			height: 82upx;
			background: #F7F7F7;
			border-radius: 50upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			margin: 0 auto 32rpx;

			.box1_box1 {
				width: 325upx;
				height: 82upx;
				background: transparent;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				color: #000000;
				z-index: 2;
				font-weight: bold;
			}

			.box1_box2 {
				width: 325upx;
				height: 82upx;
				border-radius: 50upx;
				position: absolute;
				top: 0;
				z-index: 0;
				transition: all 0.6s;
			}
		}

		.main {
			.optionsBg {
				// background-color: #e4cdff;
				height: 116rpx;
				// margin-top: 20upx;
			}

			.options {
				padding: 40upx 50upx;
				border-radius: 50upx 50upx 0 0;
				background-color: #f9fbff;
				display: flex;
				align-items: center;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				z-index: 9;
				// margin: 114upx 0 24upx 84upx;

				.option {
					font-family: AlimamaFangYuanTiVF;
					// font-weight: bold;
					font-size: 26rpx;
					color: #9B9DA5;
					line-height: 42rpx;
					position: relative;
					z-index: 2;

					&:after {
						content: '';
						width: 0;
						height: 14rpx;
						background: none;
						border-radius: 30rpx;
						// @include positionCenter;

						top: 38upx;
						transition: width .5s;
						z-index: -1;
					}

					&+.option {
						margin-left: 60upx;
					}
				}

				.action {
					// font-weight: bold;
					color: #1D2541;
					font-size: 32rpx;
					transition: color 1s 1s;
					transition-delay: 2s;
					transition: all 0.5s;

					&:after {
						content: '';
						width: 100rpx;
						background: #30ccff;
					}
				}
			}

			.orderList {
				width: 700upx;
				margin: 0 auto;

				.orderItem {
					background-color: #fff;
					border-radius: 30upx;
					padding: 30upx;
					margin-bottom: 20upx;

					.header {

						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-bottom: 30upx;
						border-bottom: 2upx solid #ecf6fe;
						margin-bottom: 20upx;

						.title {
							font-size: 28upx;
							color: #232323;
						}

						.number {
							font-size: 28upx;
							color: #43A4F4;
						}
					}

					.contentItem {

						display: flex;
						align-items: center;
						justify-content: space-between;
						line-height: 2.5;

						.lable {
							font-size: 28upx;
							color: #7C8191;
						}

						.value {
							font-size: 28upx;
							color: #1D2541;

							.ing {
								color: #28C445;
							}

							.ok {
								color: #42A5F4;
							}

							.no {
								color: #FF5151;
							}
						}
					}
				}
			}
		}

	}
</style>